<template>
  <div class="bottom_echarts_box" style="font-size: 1.0rem">
    <div id="duration_statistics"></div>
    <!--    文字描述-->
    <div class="device_basic">
      <span>日超规范时长：</span><span>{{ details.exHour }}h</span>

    </div>
    <div class="device_basic back">
      <span>日超规范占比：</span><span :style="{color:'orange'}">{{ details.exRange }}%</span>
    </div>
    <div class="device_basic">
      <span>月超规范时长：</span><span>{{ details.exMHour }}h</span>

    </div>
    <div class="device_basic back">
      <span>月超规范占比：</span><span :style="{color:'orange'}">{{ details.exMRange }}%</span>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, onMounted, inject} from "vue"
import {useStore} from "vuex"
import {toRefs} from "vue";

export default defineComponent({
  name: "duration_statistics",
  props: {
    details: {
      type: Object,
      default: {}
    }
  },
  setup(props, context) {
    //color:["#66b7f6","#061b38"],
    let echarts = inject("echarts");//引入
    const store = useStore()
    let {details} = toRefs(props)
    const details_data = details.value;
    const option = {
      title: {
        show: true,
        text: "2%",
        textStyle: {
          fontFamily: '黑体',
          color: '#ef6b06',
          fontSize: 24
        },
        x: 'center',
        y: 'center',
        // itemGap:-25
      },
      tooltip: {
        trigger: 'item',
        show: false
      },
      legend: {
        show: false,
        top: '5%',
        left: 'center'
      },
      color: ["#66b7f6", "#ccc"],
      series: [
        {
          name: '异常统计',
          type: 'pie',
          radius: ['60%', '80%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 0,
            borderColor: '#fff',
            borderWidth: 0
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {value: 2, name: '异常'},
            {value: 98, name: '其他'},
          ]
        }
      ]
    };
    const init = () => {
      let myChart = echarts.init(document.getElementById("duration_statistics"));
      option.series[0].data[0].value = details.value.exMRange
      option.series[0].data[1].value = 100 - details.value.exMRange
      option.title.text = `${details.value.exRange}%`
      myChart.setOption(option)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }
    /**
     * 初始化
     * */
    onMounted(() => {
      document.getElementById("duration_statistics").removeAttribute('_echarts_instance_')
      init()
    })
    return {}
  }
})
</script>

<style scoped lang="scss">
.bottom_echarts_box {
  padding: 0 10px 10px;

  #duration_statistics {
    //height: 14rem;
    width: 100%;
    //background: #2f4268;
  }
}

.back {
  background-color: #2f4268;
  color: white !important;
}

.device_basic {
  //color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  color: #67e1fa;

}
</style>
